<template>
  <div class="page-menu">
    <el-menu
      active-text-color="#ffffff"
      background-color="#001529"
      class="el-menu-vertical-demo"
      :default-active="defaultActive"
      text-color="#fff"
      :router="true"
    >
      <el-scrollbar :height="sliderHeight">
        <nav-menu ref="menuRef" :menu-list="menuList" />
      </el-scrollbar>
    </el-menu>

    <!-- <el-button @click="handleRef">ref</el-button> -->
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick, onUnmounted } from 'vue'
import NavMenu from './navMenu.vue'
import { useStore } from 'vuex'
import { useEventListener } from '@/utils/useEventListener'
//  import { learnMenuList } from '@/utils/menu'
// const dataMap = reactive({
//     menuList
// })
const sliderHeight = ref(0)
const menuRef = ref()
const store = useStore()
const defaultActive = computed(() => store.state.activeMenu)
const menuList = computed(() => store.state.menuList)
// const handleRef = () => {
//   console.log(menuRef.value)
// }
// 动态计算侧边栏高度
// 计算表格动态高度
const windowResizeChange = () => {
    sliderHeight.value = window.innerHeight - 60
}
useEventListener(window, 'resize', windowResizeChange)
onMounted(() => {
    nextTick(() => {
        sliderHeight.value = window.innerHeight - 60
    })
    // window.addEventListener('resize', windowResizeChange)
})
onUnmounted(() => {
    // window.removeEventListener('resize', windowResizeChange)
})
</script>

<style lang="less" scoped>
.page-menu {
  .el-menu {
    height: calc(100vh - 60px);
  }
}
</style>
